<template>
  <div>
    <div id="zhutu" style="width: 300px;height: 240px;" />
  </div>
</template>

<script>
export default {
  mounted() {
    var myChart = this.$echarts.init(document.getElementById('zhutu'))
    let xAxisData = []
        let data1 = [30, 52, 200, 334, 390, 330, 220]
        let data2 = [80, 52, 200, 334, 390, 330, 220]
        let data3 = [79, 52, 200, 334, 390, 330, 220]

        var emphasisStyle = {
            itemStyle: {
                shadowBlur: 8,
                shadowColor: 'rgba(0,0,0,0.3)',
            },
        }
        myChart.setOption({
            grid: {},
            tooltip: { show: true },
            barWidth: 20,
            barCategoryGap: '10%',
            xAxis: {
                axisLine: { interval: false },
                splitLine: { show: false },
                splitArea: { show: false },
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    show: true,
                    inside: false,
                    margin: 3,
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: {},
            color: ['#50d6d9', '#c8b6eb', '#5ab1ef'],

            series: [
                {
                    name: '简答题',
                    type: 'bar',
                    stack: 'one',
                    emphasis: emphasisStyle,
                    data: data1,
                },
                {
                    name: '多选题',
                    type: 'bar',
                    stack: 'one',
                    emphasis: emphasisStyle,
                    data: data2,
                },
                {
                    name: '单选题',
                    type: 'bar',
                    stack: 'one',
                    emphasis: emphasisStyle,
                    data: data2,
                },
            ],
        })
    },
}
</script>

  <style>

  </style>

